<template>
    <div class="create-post-page">
        <h4>新建文章</h4>
        <!-- <input type="file" @change.prevent="handleFileChange" /> -->
        <uploader :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded" class="d-flex justify-content-center align-self-center">
            <template #loading>
                <div class="spinner-border" role="status">
                    <div class="sr-only">Loading</div>
                </div>
                <div>上传中...</div>
            </template>
            <template #success="{uploadedData}">
                <img :src="uploadedData.url" width="500" />
            </template>
        </uploader>
        <ValidateForm @form-submit="onFormSubmit">
            <div class="mb-3 text-left">
                <label class="form-label">文章标题：</label>
                <ValidateInput
                    v-model="postObj.title"
                    :rules="[{ type: 'required', message: '请输入文章标题' }]"
                    placeholder="请输入文章标题"
                ></ValidateInput>
            </div>
            <div class="mb-3 text-left">
                <label class="form-label">文章详情：</label>
                <ValidateInput
                    tagType="textarea"
                    v-model="postObj.content"
                    :rules="[{ type: 'required', message: '请输入文章详情' }]"
                    placeholder="请输 入文章详情"
                ></ValidateInput>
            </div>
            <template #submit>
                <button type="submit" class="btn btn-primary">发表文章</button>
            </template>
        </ValidateForm>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import ValidateForm from "@/components/ValidateForm.vue";
import ValidateInput from "@/components/ValidateInput.vue";
import { PostProps } from "@/store";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { uploadFile } from "@/api/column";
import createMessage from "@/components/createMessage";
import Uploader from "@/components/Uploader.vue";
export default defineComponent({
    components: {
        ValidateForm,
        ValidateInput,
        Uploader,
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        const postObj = reactive({
            title: "",
            content: "",
        });
        const onFormSubmit = result => {
            if (result) {
                const { columnId } = store.state.user;
                const newPost: PostProps = {
                    _id: Date.now().toString(),
                    ...postObj,
                    column: columnId,
                    createdAt: new Date().toLocaleString(),
                };
                store.commit("createPost", newPost);
                router.push({ name: "ColumnDetail", params: { id: columnId } });
            }
        };

        const handleFileChange = (e: Event) => {
            const target = e.target as HTMLInputElement;
            let file = target.files[0];
            if (!file.type.includes("image")) {
                return createMessage("请上传图片", "error");
            }
            let formData = new FormData();
            formData.append(file.name, file);
            uploadFile(formData).then(res => {
                if (res.code === 0) {
                    createMessage("上传成功", "success");
                }
            });
        };
        const beforeUpload = (file: File) => {
            if (!file.type.includes("image")) {
                createMessage("请上传图片", "error");
                return false;
            }
            return true;
        };
        const onFileUploaded = data => {
            console.log(data);
        };
        return { onFormSubmit, postObj, handleFileChange, beforeUpload, onFileUploaded };
    },
});
</script>

<style scoped></style>
